<template>
    <div class="addDialog" id="addDialog">
        <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
        >
            <el-form-item label="名称" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="值" prop="value">
                <el-input v-model="ruleForm.value"></el-input>
            </el-form-item>
            <el-form-item label="类型" prop="type">
                <el-input v-model="ruleForm.type"></el-input>
            </el-form-item>
            <el-form-item label="描述" prop="description">
                <el-input v-model="ruleForm.description"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="remarks">
                <el-input v-model="ruleForm.remarks"></el-input>
            </el-form-item>
            <el-form-item label="排序" prop="sort">
                <el-input v-model="ruleForm.sort"></el-input>
            </el-form-item>
            <el-form-item label="维护人" prop="updatedBy">
                <el-input v-model="ruleForm.updatedBy"></el-input>
            </el-form-item>
        </el-form>
        <div class="dialogFooter">
            <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
        </div>
    </div>
</template>
<script>
export default {
    props:{
        addVisible:{
            type: Boolean,
            default: 100
        }
    },
    watch:{
       addVisible(val){
           if(!val){
               this.ruleForm={
                name: '',
                value: '',
                type: '',
                description: '',
                remarks: '',
                sort: '',
                updatedBy: ''
            }
           }
       } 
    },
    data() {
        return {
            ruleForm: {
                name: '',
                value: '',
                type: '',
                description: '',
                remarks: '',
                sort: '',
                updatedBy: ''
            },
            rules: {
                name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
                value: [{ required: true, message: '请输入值', trigger: 'blur' }],
                type: [{ required: true, message: '请输入类型', trigger: 'blur' }],
                description: [{ required: true, message: '请输入描述', trigger: 'blur' }],
                remarks: [{ required: true, message: '请输入备注', trigger: 'blur' }],
                sort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
                updatedBy: [{ required: true, message: '请输入维护人', trigger: 'blur' }]
            }
        };
    },
    mounted() {},
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                   this.$emit('addBase',this.ruleForm)
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }
    }
};
</script>
<style  lang="scss">
#addDialog {
    .el-upload--text {
        border: none;
        height: 32px;
        width: 80px;
    }
}
</style>
<style scoped>
.el-upload--text {
    border: none;
}
.dialogFooter {
    display: flex;
    justify-content: flex-end
}
</style>